<template>
  <!--模板-->
  <el-row :gutter="20" >
    <el-col :span="12">
      <el-button type="" @click="setValue">赋值</el-button>
      <el-button type="" @click="resetValue">重置</el-button><br>
      表单列数： <el-radio-group v-model="formMeta.columnsNumber">
        <el-radio label="1"></el-radio>
        <el-radio label="2"></el-radio>
        <el-radio label="3"></el-radio>
        <el-radio label="4"></el-radio>
        <el-radio label="6"></el-radio>
        <el-radio label="8"></el-radio>
      </el-radio-group>
      <nf-form
        ref="myForm"
        :model="model"
        :partModel="model2"
        v-bind="formProps"
        :childPropsList="itemMeta"
        :formMeta="formMeta"
      ></nf-form>
      <show-object :obj="model2"></show-object>
    </el-col>
    <el-col :span="11">
      <show-object :obj="model"></show-object>
    </el-col>
  </el-row>
  
</template>

<script lang="ts">
  import { defineComponent, reactive, ref, onMounted, toRaw } from 'vue'
  import { createModel, nfForm } from '../../../../lib-elp/main'

  import _formMeta from '../form-item/form.json' // './form.json'
  import showObject from '../../show-object.vue'

  type ITest = {
    text: string,
    area: string,
    pwd: string
  }

  export default defineComponent({
    name: 'nf-elp-form-page',
    components: {
      nfForm,
      showObject
    },
    props: {
    },
    setup(props, context) {
      // _formMeta.formMeta.colOrder = [101, 100, 102]
      const json = reactive(_formMeta)
      // console.log('读取的 json：', formMeta)
      const {
        formMeta,
        formProps,
        itemMeta
      } = json

      formMeta.columnsNumber = 1
      // const { colOrder } = json.formMeta
      const model2 = reactive({})

      // 根据 meta 创建表单的 model
      const model =  createModel<ITest>(itemMeta, formMeta.colOrder)
      // console.log('model：', model)

      const setValue = () => {
        model.$state = {
          text: 'aaa',
          area: 'bbb',
          pwd: 'ccc',
          checks: [1,2]
        }
      }

      const resetValue = () => {
        model.$reset()
      }
      const myForm = ref(null)

      onMounted(() => {
        // console.log('myForm', myForm)
      })

      return {
        setValue,
        resetValue,
        myForm,
        formMeta,
        formProps,
        itemMeta,
        model2,
        model
      }
    }
  })
</script>